<template>
  <div style="height:668px;" class="animate__animated animate__bounceInRight">
    <div class="flex-center-xs">
      <div class="left">
        <ul>
          <li 
            v-for="(arrItem, indexItem) in dataObj.arr" 
            :key="indexItem"
            class="flex-center-start"
            >
              <span class="circle"></span>
              {{arrItem}}
            </li>
        </ul>
      </div>
      <div class="imgBox">
        <img :src="dataObj.img" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    componentName: {
      type: String
    }
  },
  data () {
    return {
      dataObj: {},
      recruitObj1: {
        arr: [
          '发布职位',
          '发布职位',
          '个性化标签',
          '短视频、图片、文字地图等多形式展示'
        ],
        img: require('@/assets/images/index/recruit/1.png')
      },
      recruitObj2: {
        arr: [
          '分享朋友圈',
          '分享微信群',
          '分享微信好友',
          '有奖二级裂变',
          '邀请好友应聘或成为推荐人'
        ],
        img: require('@/assets/images/index/recruit/2.png')
      },
      recruitObj3: {
        arr: [
          '一键投递',
          '一键拨打电话',
          '在线微信沟通',
        ],
        img: require('@/assets/images/index/recruit/3.png')
      },
      recruitObj4: {
        arr: [
          '在职员工库',
          '离职员工库',
          '自定义标签管理',
        ],
        img: require('@/assets/images/index/recruit/4.png')
      },
      recruitObj5: {
        arr: [
          '有奖推荐',
          '多级有奖裂变',
          '阶段性奖励',
          '推荐排行榜',
          '自定义奖励金额'
        ],
        img: require('@/assets/images/index/recruit/5.png')
      },
      recruitObj6: {
        arr: [
          '推荐关系',
          '推荐进展状态',
          '预计到账金额',
          '可提现金额',
          '奖金库'
        ],
        img: require('@/assets/images/index/recruit/6.png')
      }
    }
  },
  watch: {
    componentName (v) {
      console.log('watch',v)
      
    }
  },
  mounted () {
    // console.log(this.componentName)
    this.geteData(this.componentName)
  },
  methods: {
    geteData(v) {
      switch (v) {
        case "recruit1":
          this.dataObj = this.recruitObj1
          break;
        case "recruit2":
          this.dataObj = this.recruitObj2
          break;
        case "recruit3":
          this.dataObj = this.recruitObj3
          break;
        case "recruit4":
          this.dataObj = this.recruitObj4
          break;
        case "recruit5":
          this.dataObj = this.recruitObj5
          break;
        case "recruit6":
          this.dataObj = this.recruitObj6
          break;
      }
    }
  }
}
</script>
<style lang="less" scoped>
 .left{
   li{
     font-size: 30px;
     color:@color3;
     margin-bottom:30px;
     .circle{
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 5px solid #1373ff;
        border-radius: 50%;
        background-color:#fff;
        box-sizing: border-box;
        margin-right:26px;
     }
   }
 }
</style>


